<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>

<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Book Edit</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/asserts/css/bootstrap.min.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/asserts/css/common.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="${pageContext.request.contextPath}/asserts/js/bootstrap.min.js"></script>
  <script>
    function editBook(bookId) {
      // 显示模态框，不需要填充数据
      document.getElementById('bookId').value = bookId;
      $('#editModal').modal('show');
    }
  </script>
</head>
<body>
<!-- 引入header.jsp -->
<%@ include file="/asserts/common/header.jsp" %>
<div class="container">
  <h2 class="text-center">Books List</h2>
  <c:if test="${not empty message}">
    <div class="alert alert-info">${message}</div>
  </c:if>
  <!-- Add Book Form -->
  <div class="row mb-3">
    <div class="col-md-12 text-center">
      <h3>Add a New Book</h3>
      <form action="add" method="post" class="form-inline">
        <input type="text" name="title" class="form-control mb-2 mr-2" placeholder="Title" required />
        <input type="text" name="isbn" class="form-control mb-2 mr-2" placeholder="ISBN" required />
        <input type="text" name="author" class="form-control mb-2 mr-2" placeholder="Author" required />
        <input type="text" name="publisher" class="form-control mb-2 mr-2" placeholder="Publisher" required />
        <select name="category" class="form-control mb-2 mr-2" required>
          <option value="">Select Category</option>
          <option value="Literature">Literature</option>
          <option value="History">History</option>
          <option value="Science">Science</option>
          <option value="Fantasy">Fantasy</option>
          <option value="Other">Other</option>
        </select>
        <input type="number" name="totalCopies" class="form-control mb-2 mr-2" placeholder="Total Copies" required />
        <button type="submit" class="btn btn-success mb-2">Add Book</button>
      </form>
    </div>
  </div>

  <!-- 左上角：类别选择 -->
  <div class="row">
    <div class="col-md-6">
      <form action="categoryEdit" method="get" class="form-inline">
        <label for="category" class="mr-2">Category:</label>
        <!-- 固定类别选项 -->
        <select name="categoryName" id="category" class="form-control">
          <option value="">All</option>
          <option value="Literature" <c:if test="${categoryName == 'Literature'}">selected</c:if>>Literature</option>
          <option value="History" <c:if test="${categoryName == 'History'}">selected</c:if>>History</option>
          <option value="Science" <c:if test="${categoryName == 'Science'}">selected</c:if>>Science</option>
          <option value="Fantasy" <c:if test="${categoryName == 'Fantasy'}">selected</c:if>>Fantasy</option>
          <option value="Other" <c:if test="${categoryName == 'Other'}">selected</c:if>>Other</option>
        </select>
        <button type="submit" class="btn btn-primary ml-2">Show</button>
      </form>
    </div>

    <!-- 右上角：搜索 -->
    <div class="col-md-6 text-right">
      <form action="searchEdit" method="get" class="form-inline">
        <label for="query" class="mr-2">Search:</label>
        <input type="text" id="query" name="query" class="form-control" placeholder="Search by Title" />
        <button type="submit" class="btn btn-primary ml-2">Search</button>
      </form>
    </div>
  </div>
  <!-- 分类展示 -->
  <c:if test="${not empty categoryName}">
    <h3>Books in Category: ${categoryName}</h3>
  </c:if>
  <c:if test="${empty categoryName}">
    <h3>All Books</h3>
  </c:if>
  <!-- 图书列表（使用Bootstrap表格） -->
  <table class="table table-bordered table-hover">
    <thead>
    <tr class="info">
      <th>ID</th>
      <th>Title</th>
      <th>Author</th>
      <th>Category</th>
      <th>Publisher</th>
      <th>TotalCopies</th>
      <th>AvailableCopies</th>
      <th>Edit</th>
      <th>Delete</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach var="book" items="${books}">
      <tr>
        <td>${book.id}</td>
        <td>${book.title}</td>
        <td>${book.author}</td>
        <td>${book.category}</td>
        <td>${book.publisher}</td>
        <td>${book.totalCopies}</td>
        <td>${book.availableCopies}</td>
        <td>
          <button type="button" class="btn btn-success" onclick="editBook(${book.id})">Edit</button>
        </td>
        <td>
          <!-- 删除按钮 -->
          <form action="delete" method="post">
            <input type="hidden" name="bookId" value="${book.id}" />
            <button type="submit" class="btn btn-success">Delete</button>
          </form>
        </td>
      </tr>
    </c:forEach>
    </tbody>
  </table>
  <!-- Edit Book Form (Initially Hidden) -->
  <!-- 编辑书籍的模态框 -->
  <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="editModalLabel">Edit Book</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <!-- 编辑表单 -->
          <form action="Edit" method="post">
            <input type="hidden" name="bookId" id="bookId" value="${book.id}" />
            <div class="form-group">
              <label for="editTitle">Title:</label>
              <input type="text" id="editTitle" name="title" class="form-control" required />
            </div>
            <div class="form-group">
              <label for="editIsbn">ISBN:</label>
              <input type="text" id="editIsbn" name="isbn" class="form-control" required />
            </div>
            <div class="form-group">
              <label for="editAuthor">Author:</label>
              <input type="text" id="editAuthor" name="author" class="form-control" required />
            </div>
            <div class="form-group">
              <label for="editPublisher">Publisher:</label>
              <input type="text" id="editPublisher" name="publisher" class="form-control" required />
            </div>
            <div class="form-group">
              <label for="editCategory">Category:</label>
              <select id="editCategory" name="category" class="form-control" required>
                <option value="">Select Category</option>
                <option value="Literature">Literature</option>
                <option value="History">History</option>
                <option value="Science">Science</option>
                <option value="Fantasy">Fantasy</option>
                <option value="Other">Other</option>
              </select>
            </div>
            <div class="form-group">
              <label for="editTotalCopies">Total Copies:</label>
              <input type="number" id="editTotalCopies" name="totalCopies" class="form-control" required />
            </div>
            <div class="form-group">
              <label for="editAvailableCopies">Available Copies:</label>
              <input type="number" id="editAvailableCopies" name="availableCopies" class="form-control" required />
            </div>
            <button type="submit" class="btn btn-primary">Update Book</button>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- 分页功能 -->
  <div class="pagination">
    <!-- 显示上一页 -->
    <c:if test="${currentPage > 1}">
      <a href="?page=${currentPage - 1}" class="btn btn-primary">Previous</a>
    </c:if>
    <!-- 显示当前页码 -->
    <span>Page ${currentPage} of ${totalPages}</span>
    <!-- 显示下一页 -->
    <c:if test="${currentPage < totalPages}">
      <a href="?page=${currentPage + 1}" class="btn btn-primary">Next</a>
    </c:if>
  </div>
</div>
<!-- 引入footer.jsp -->
<%@ include file="/asserts/common/footer.jsp" %>
<script src="${pageContext.request.contextPath}/asserts/js/utils/dynamicBG.js"></script>
</body>
</html>
